<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
	<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	<title>MultiSelect combobox</title>
</head>
<body>
<script type="text/javascript" charset="utf-8">

	var form1 = [
		{ rows:[
			{
				view:"multicombo", label:"Name", labelPosition: "top",
				value:"1,7,9,12",
				button: true,
				suggest: {
					body:{
						data:big_film_set,
						template: webix.template("#title#")
					}
				},
				on:{
					onChange:function(){
						webix.message("Data was changed");
					}
				}
			},
			{ view:"checkbox", label:"In Stock", value: 1}
		]},
		{ cols:[
			{  },
			{ view:"button", value:"Find" , type:"form" },
			{  }
		]}
	];

	var form2 = [
		{ rows:[
			{
				view:"multicombo", label:"To", value:"2,3", suggest: "data/names.js"
			},
			{ view: "text", label: "Subject"},
			{ view:"textarea", label:"Message", height:150}
		]},
		{cols:[
			{  },
			{ view:"button", value:"Send Message" , type:"form" },
			{  }
		]}
	];

	webix.ui.fullScreen();
	webix.ui({
		type:"wide", width:600,
		margin:100, padding:50,
		rows:[
			{ view:"form", rows:form1 },
			{ view:"form", rows:form2 }
		]
	});

</script>
</body>
</html>